import React from 'react';
import { DatePicker, Form } from 'antd';
import moment from 'moment';

const DateTimeRange: React.FC<{}> = () => {
  const { RangePicker } = DatePicker;

  return (
    <>
      <Form.Item
        name="dateTimeRange[]"
        className="ant-col ant-form-item-control"
        initialValue={[moment().startOf('day'), moment().endOf('day')]}
        style={{ marginBottom: '0px' }}
      >
        <RangePicker
          ranges={{
            // Today: [moment(), moment()],
            今日: [moment().startOf('day'), moment().endOf('day')],
            昨日: [
              moment().subtract(1, 'day').startOf('day'),
              moment().subtract(1, 'day').endOf('day'),
            ],
            近7天: [moment().subtract(6, 'day'), moment().endOf('day')],
            上周: [
              moment()
                .week(moment().week() - 1)
                .startOf('week'),
              moment()
                .week(moment().week() - 1)
                .endOf('week'),
            ],
            本周: [moment().startOf('week'), moment().endOf('week')],
            上月: [
              moment()
                .month(moment().month() - 1)
                .startOf('month'),
              moment()
                .month(moment().month() - 1)
                .endOf('month'),
            ],
            本月: [moment().startOf('month'), moment().endOf('month')],
            今年: [moment().startOf('year'), moment().endOf('year')],
          }}
          showTime
          // format="YYYY/MM/DD HH:mm:ss"
          format="YYYY-MM-DD  HH:mm:ss"
          defaultValue={[moment().startOf('day'), moment().endOf('day')]}
        />
      </Form.Item>
    </>
  );
};
export default DateTimeRange;
